{% extends "frame_base.html" %}

{% block head %}
    <link rel="stylesheet" href="{{ static_url("css/style.css") }}" type="text/css">
    <link rel="stylesheet" href="{{ static_url("css/editormd.css") }}" type="text/css">
{% end %}

{% block body %}
  <form action="{{ request.path }}" method="post" class="compose">
      <div id="compose_title" style="padding-left: 2%;text-align: left;" ><h2>标题：<input name="title" style="width: 40%;" type="text" value="{{ entry.title if entry else "" }}"/></h2>
          <input type="checkbox" name="ispublic" id="ispublic" {{ "checked"  if entry and entry.is_public else ""}}>
          <label for="ispublic" title="打勾后允许所有人查看" style="width: 40%;">是否公开</label>
      </div>
    <div id="content-editormd" class="form-group">
        <textarea style="display:none;" class="form-control" id="content-editormd-markdown-doc" name="content-editormd-markdown-doc">{{ entry.markdown if entry else "" }}</textarea>
    </div>

    <div>
      <input type="submit" value="{{ _("保存变更") if entry else _("保存") }}" class="submit"/>
      &nbsp;<a href="{{ "/blog/entry/" + entry.slug if entry else "/" }}">{{ _("取消") }}</a>
    </div>
    {% if entry %}
      <input type="hidden" name="id" value="{{ entry.id }}"/>
    {% end %}
    {% module xsrf_form_html() %}
  </form>
{% end %}

{% block bottom %}
    <script src="{{ static_url("js/jquery.min.js") }}"></script>
    <script src="{{ static_url("editormd/plugins/image-clipboard/image-clipboard.js") }}"></script>
    <script src="{{ static_url("js/editormd.min.js") }}"></script>
    <script type="text/javascript">
        var contentEditor;
        $(function() {
            contentEditor = editormd("content-editormd", {
                width   : "100%",
                height  : "640",
                syncScrolling : "single",
                path    : "/static/editormd/lib/",
                codeFold : true,
                saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
                searchReplace : true,
                //watch : false,                // 关闭实时预览
                htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
                //toolbar  : false,             //关闭工具栏
                //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
                emoji : true,
                taskList : true,
                tocm            : true,         // Using [TOCM]
                tex : true,                   // 开启科学公式TeX语言支持，默认关闭
                flowChart : true,             // 开启流程图支持，默认关闭
                sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
                //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
                //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
                //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
                //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
                //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
                imageUpload : true,
                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL : "/images/upload",
                onload : function() {
                    console.log('onload', this);
                    this.imagePaste();
                    //this.fullscreen();
                    //this.unwatch();
                    //this.watch().fullscreen();

                    //this.setMarkdown("#PHP");
                    //this.width("100%");
                    //this.height(480);
                    //this.resize("100%", 640);
                }

            });
        });
    </script>

    <script type="text/javascript">
  //<![CDATA[

    $(function() {
      $("input[name=title]").select();
      $("form.compose").submit(function() {
          var required = ["title","content-editormd-markdown-doc"];
          var form = $(this).get(0);
          for (var i = 0; i < required.length; i++) {
              if (!form[required[i]].value) {
                  $(form[required[i]]).select();
                  return false;
              }
          }
          return true;
      });
    });

  //]]>
  </script>
{% end %}
